<template>
	<view class="rechargeRecord">
		<view class="ul">
			<view class="li" v-for="(item,index) in list" :key="index">
				<view class="xx" style="-webkit-flex: 1;flex: 1;">
					<view class="zxfs">{{item.order_status == 2 ? '充值成功' : ''}}</view>
					<view class="sj">{{item.buying_time}}</view>
				</view>
				<view class="je" style="width: 80px;">+{{item.payment_amount}}</view>
			</view>
			<view class="list_bots" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>
	</view>
</template>

<script>
	import { czjlqueryUserAll } from '@/utils/api.js';
	export default {
		data() {
			return {
				id:0,
				list:[
					// {
					// 	id:'1',
					// 	zffs:'微信支付',
					// 	sj:'2021-10-09  15:26',
					// 	je:'188.00'
					// },{
					// 	id:'2',
					// 	zffs:'银联支付',
					// 	sj:'2021-10-09  15:26',
					// 	je:'188.00'
					// },{
					// 	id:'3',
					// 	zffs:'支付宝支付',
					// 	sj:'2021-10-09  15:26',
					// 	je:'188.00'
					// }
				],
				loadMoreText: "加载中...",
				showLoadMore: false,
				// 最大值
				max: 5,
				// 页数
				current:1,
				// 每页数量
				pageSize:10
			}
		},
		onLoad(e) {
			this.id=e.id
			this.initData();
		},
		// 监听页面卸载
		onUnload() {
			this.max = 0,
			this.list = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
			this.current=1,
			this.pageSize=5
		},
		// 页面滚动到底部的事件
		onReachBottom() {
			console.log("onReachBottom");
			if (this.list.length > this.max || this.loadMoreText=='没有更多记录了!') {
				this.loadMoreText = "没有更多记录了!"
				return;
			}
			this.showLoadMore = true;
			this.current+=1
			setTimeout(() => {
				this.setListData();
			}, 300);
		},
		// 监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		methods: {
			// 获取充值记录
			initData(){
				// 获取充值记录
				czjlqueryUserAll({
					current:this.current,
					pageSize:this.pageSize,
					orderStatus:2
				}).then((res) => {
				    if (res.code === 200) {
						// console.log(res);
						this.list=res.data
						if(this.list.length < 10){
							this.showLoadMore = true;
							this.loadMoreText = "没有更多记录了!"
						}
						uni.stopPullDownRefresh();
				    } else {
						uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
						uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 下拉加载数据
			setListData() {
				let data = [];
				// 获取充值记录
				czjlqueryUserAll({
					current:this.current,
					pageSize:this.pageSize,
					orderStatus:2
				}).then((res) => {
				    if (res.code === 200) {
				      // console.log(res);
					  data=res.data
					  if(data.length < 10){
					  	this.showLoadMore = true;
					  	this.loadMoreText = "没有更多记录了!"
					  }
					  this.list = this.list.concat(data);
				    } else {
				      uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			
		}
	}
</script>

<style scoped lang="scss">
		.rechargeRecord{
			// width: 100%;
			padding: 8px 10px 10px 10px;
			.ul{
				width: 100%;
				.li{
					width: 100%;
					height: 70px;
					background: #FFFFFF;
					border-radius: 5px;
					margin-bottom: 10px;
					display: flex;
					align-items: center;
					.xx{
						padding: 0 10px;
						display: flex;
						flex-direction: column;
						.zxfs{
							font-size: 15px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							color: $mainText;
							line-height: 30px;
						}
						.sj{
							font-size: 15px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 20px;
						}
					}
					.je{
						font-size: 15px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 600;
						color: #09BB07;
						line-height: 70px;
						text-align: center;
					}
				}
				.list_bots{
					font-size: 16px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: $mainText;
					line-height: 30px;
					text-align: center;
				}
			}
			
		}
</style>
